<%--
  Created by IntelliJ IDEA.
  User: 刘生浩
  Date: 2021/11/2
  Time: 16:53
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ include file="../common/IncludeTop.jsp"%>


<head>
  <link rel="StyleSheet" href="css/jpetstore.css" type="text/css"
        media="screen" />

  <meta name="generator"
        content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
  <title>JPetStore Demo</title>
  <meta content="text/html; charset=windows-1252"
        http-equiv="Content-Type" />
  <meta http-equiv="Cache-Control" content="max-age=0" />
  <meta http-equiv="Cache-Control" content="no-cache" />
  <meta http-equiv="expires" content="0" />
  <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
  <meta http-equiv="Pragma" content="no-cache" />
</head>

<body>

<%--<div id="Header">--%>

<%--  <div id="Logo">--%>
<%--    <div id="LogoContent">--%>
<%--      <a href="main"><img src="images/logo-topbar.gif" /></a>--%>
<%--    </div>--%>
<%--  </div>--%>

<%--  <div id="Menu">--%>
<%--    <div id="MenuContent">--%>
<%--      <a href="viewCart"><img align="middle" name="img_cart"--%>
<%--                              src="images/cart.gif" /></a> <img align="middle"--%>
<%--                                                                   src="images/separator.gif" /> <a--%>
<%--            href="../account/SignonForm.html">Sign In</a> <a href="#">Sign--%>
<%--      Out</a> <img align="middle" src="images/separator.gif" /> <a--%>
<%--            href="../account/EditAccountForm.html">My Account</a> <img align="middle"--%>
<%--                                                                       src="images/separator.gif" /> <a href="../help.html">?</a>--%>
<%--    </div>--%>
<%--  </div>--%>

<%--  <div id="Search">--%>
<%--    <div id="SearchContent">--%>
<%--      <form action="../catalog/SearchProducts.html" method="post">--%>
<%--        <input type="text" name="keyword" size="14" /> <input--%>
<%--              type="submit" name="searchProducts" value="Search" />--%>
<%--      </form>--%>
<%--    </div>--%>
<%--  </div>--%>

<%--  <div id="QuickLinks">--%>
<%--    <a href="../catalog/Category.html"><img--%>
<%--            src="images/sm_fish.gif" /></a> <img src="images/separator.gif" />--%>
<%--    <a href="../catalog/Category.html"><img--%>
<%--            src="images/sm_dogs.gif" /></a> <img src="images/separator.gif" />--%>
<%--    <a href="../catalog/Category.html"><img--%>
<%--            src="images/sm_reptiles.gif" /></a> <img--%>
<%--          src="images/separator.gif" /> <a href="../catalog/Category.html"><img--%>
<%--          src="images/sm_cats.gif" /></a> <img src="images/separator.gif" />--%>
<%--    <a href="../catalog/Category.html"><img--%>
<%--            src="images/sm_birds.gif" /></a>--%>
<%--  </div>--%>

<%--</div>--%>

<div id="Content">
<%--  <style type="text/css">--%>
<%--    table.imagetable {--%>
<%--      font-family: verdana,arial,sans-serif;--%>
<%--      font-size:11px;--%>
<%--      color:#333333;--%>
<%--      border-width: 1px;--%>
<%--      border-color: #999999;--%>
<%--      border-collapse: collapse;--%>
<%--    }--%>
<%--    table.imagetable th {--%>
<%--      background:#b5cfd2 url('/images/10.jpg');--%>
<%--      border-width: 1px;--%>
<%--      padding: 8px;--%>
<%--      border-style: solid;--%>
<%--      border-color: #999999;--%>
<%--    }--%>
<%--    table.imagetable td {--%>
<%--      background:#B0E0E6 url('/images/20.jpg');--%>
<%--      border-width: 1px;--%>
<%--      padding: 8px;--%>
<%--      border-style: solid;--%>
<%--      border-color: #999999;--%>
<%--    }--%>
<%--  </style>--%>
  <style type="text/css">

    table {
      width: 700px;
      padding: 0;
      margin: 0;
    }

    caption {
      padding: 0 0 5px 0;
      width: 700px;
      font: italic 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      text-align: right;
    }

    th {
      font: bold 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      color: #4f6b72;
      border-right: 1px solid #C1DAD7;
      border-bottom: 1px solid #C1DAD7;
      border-top: 1px solid #C1DAD7;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-align: left;
      padding: 6px 6px 6px 12px;
      background: #d5eaca no-repeat;
    }

    th.nobg {
      border-top: 0;
      border-left: 0;
      border-right: 1px solid #C1DAD7;
      background: none;
    }

    td {
      border-right: 1px solid #C1DAD7;
      border-bottom: 1px solid #C1DAD7;
      background: #8FBC8F;
      font-size:16px;
      padding: 6px 6px 6px 12px;
      color: 	#F5FFFA;
    }


    td.alt {
      background: #F5FAFA;
      color: #797268;
    }

    th.spec {
      border-left: 1px solid #C1DAD7;
      border-top: 0;
      background: #fff no-repeat;
      font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    }

    th.specalt {
      border-left: 1px solid #C1DAD7;
      border-top: 0;
      background: #f5fafa no-repeat;
      font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      color: #797268;
    }
  </style>

  <style>
    body{
      background: #8FBC8F ;
    }

    .button{
      cursor: pointer;
      width: 180px;
      line-height: 38px;
      text-align: center;
      font-weight: bold;
      color: #fff;
      text-shadow:1px 1px 1px #333;
      border-radius: 5px;
      margin:0 20px 20px 0;
      position: relative;
      overflow: hidden;
    }
    .button:nth-child(6n){
      margin-right: 0;
    }
    .button.green{
      border:1px solid #64c878;
      box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
      background: -webkit-linear-gradient(top,#90dfa2,#84d494);
      background: -moz-linear-gradient(top,#90dfa2,#84d494);
      background: linear-gradient(top,#90dfa2,#84d494);
    }
    .green:hover{
      background: -webkit-linear-gradient(top,#aaebb9,#82d392);
      background: -moz-linear-gradient(top,#aaebb9,#82d392);
      background: linear-gradient(top,#aaebb9,#82d392);
    } .green:active{
        top:1px;
        box-shadow: 0 1px 3px #4d7254 inset,0 3px 0 #fff;
        background: -webkit-linear-gradient(top,#5eac6e,#72b37e);
        background: -moz-linear-gradient(top,#5eac6e,#72b37e);
        background: linear-gradient(top,#5eac6e,#72b37e);
      }
    .okTips{
      color:green;
    }
    .errorTips{
      color:red;
    }
  </style>
  <style type="text/css">
    #Banner,#PoweredBy{
      background-color:#8FBC8F;
    }
  </style>
<script>

  $(function (){
    var password;
    $('#stripes--517137302').on('blur',function(){
      password= this.value
      if(this.value ==="") $('#passwordTips1').attr("class","errortips").text('密码不能为空');
      else  $('#passwordTips1').attr("class","oktips").text('OK');
      console.log(password);
    });
    $('#repeatedPassword').on('blur',function(){
      //var password=$('#password').val();
      if(this.value ==="")
        $('#passwordTips').attr("class","errortips").text('密码不能为空');
      else {
        $.ajax({
          type  : "GET",
          url   : "passwordRepeat?repeatedPassword="+this.value+"&password="+password,
          success : function(data){
            console.log(data);
            if(data==="Error"){
              $('#passwordTips').attr("class","errortips").text('两次密码不一致');
            }else if(data==="OK"){
              $('#passwordTips').attr("class","oktips").text('OK');
            }
          }
        });
      }
    });
  });

</script>
  <div id="Catalog">


    <form action="UpdateInformation" method="post">

      <h3>User Information</h3>

      <table  class="imagetable">
        <tbody>
        <tr>
          <td>User ID:</td>
          <td>${sessionScope.account.username}</td>
        </tr>
        <tr>
          <td>New password:</td>
          <td><input id="stripes--517137302" name="password"
                     type="password"><script type="text/javascript">
            setTimeout(
                    function() {
                      try {
                        var z = document
                                .getElementById('stripes--517137302');
                        z.focus();
                        z.select();
                      } catch (e) {
                      }
                    }, 1);
          </script>
            <span id="passwordTips1"></span>

          </td>
        </tr>
        <tr>
          <td>Repeat password:</td>
          <td>
            <input name="repeatedPassword" type="password" id="repeatedPassword">
            <span id="passwordTips"></span>
          </td>
        </tr>
        </tbody>
      </table>
      <h3>Account Information</h3>

      <table  class="imagetable">
        <tbody>
        <tr>
          <td>First name:</td>
          <td><input name="account.firstName" value="${sessionScope.account.firstName}" type="text"></td>
        </tr>
        <tr>
          <td>Last name:</td>
          <td><input name="account.lastName" value="${sessionScope.account.lastName}" type="text"></td>
        </tr>
        <tr>
          <td>Email:</td>
          <td><input name="account.email"
                     value="${sessionScope.account.email}" type="text" size="40"></td>
        </tr>
        <tr>
          <td>Phone:</td>
          <td><input name="account.phone" value="${sessionScope.account.phone}"
                     type="text"></td>
        </tr>
        <tr>
          <td>Address 1:</td>
          <td><input name="account.address1"
                     value="${sessionScope.account.address1}" type="text" size="40"></td>
        </tr>
        <tr>
          <td>Address 2:</td>
          <td><input name="account.address2" value="${sessionScope.account.address2}"
                     type="text" size="40"></td>
        </tr>
        <tr>
          <td>City:</td>
          <td><input name="account.city" value="${sessionScope.account.city}" type="text"></td>
        </tr>
        <tr>
          <td>State:</td>
          <td><input name="account.state" value="${sessionScope.account.state}" type="text"
                     size="4"></td>
        </tr>
        <tr>
          <td>Zip:</td>
          <td><input name="account.zip" value="${sessionScope.account.zip}" type="text"
                     size="10"></td>
        </tr>
        <tr>
          <td>Country:</td>
          <td><input name="account.country" value="${sessionScope.account.country}" type="text"
                     size="15"></td>
        </tr>
        </tbody>
      </table>

      <h3>Profile Information</h3>

      <table  class="imagetable">
        <tbody>
        <tr>
          <td>Language Preference:</td>
          <td><select name="account.languagePreference">
            <option selected="selected" value="English">English</option>
            <option value="Chinese">Chinese</option>
            <option value="japanese">japanese</option>

          </select></td>
        </tr>
        <tr>
          <td>Favourite Category:</td>
          <td><select name="account.favouriteCategoryId">
            <option value="FISH">FISH</option>
            <option selected="selected" value="DOGS">DOGS</option>
            <option value="REPTILES">REPTILES</option>
            <option value="CATS">CATS</option>
            <option value="BIRDS">BIRDS</option>
          </select></td>
        </tr>
<%--        <tr>--%>
<%--          <td>Enable MyList</td>--%>
<%--          <td><input name="account.listOption" value="true"--%>
<%--                     type="checkbox" checked="checked"></td>--%>
<%--        </tr>--%>
<%--        <tr>--%>
<%--          <td>Enable MyBanner</td>--%>
<%--          <td><input name="account.bannerOption" value="true"--%>
<%--                     type="checkbox" checked="checked"></td>--%>
<%--        </tr>--%>

        </tbody>
      </table>


      <input name="editAccount" value="Save Account Information"
             type="submit" class="button green" >

    </form>
<%--    <a href="../order/ListOrders.html">My Orders</a>--%>

  </div>

</div>

<div id="Footer">

  <div id="PoweredBy">
    &nbsp<a href="www.csu.edu.cn">www.csu.edu.cn</a>
  </div>

  <div id="Banner">IncludeBottom.html</div>
  <style type="text/css">
    #Menu,#Logo,#Search{
      background-color:			#F5FFFA;
    }
  </style>
  <style type="text/css">
    #QuickLinks{
      background-color:	#8FBC8F;
    }
  </style>
</div>

</body>
</html>
